<template>
	<view class="Jy_order_center_group">
		<view class="Jy_order_center_box">
			<view class="Jy_order_state_group">
				<view class="state-list-box" v-for="(item, index) in orderStateList" :key="index" @click="tabChange(index)">
					<view :class="['state-text-box', index == orderStateIndex ? 'active' : '']">
						<text>{{item.name}}</text>
					</view>
					<view class="line" v-if="index == orderStateIndex"></view>
				</view>
			</view> 
			<view class="Jy_order_swiper_group">
				<scroll-view scroll-y="true" style="height: calc( 100vh - 70rpx)">
					<view class="Jy_collection_empty_group" v-if="true">
						<DataEmpty imageUrl="https://louiscloud-1304691295.cos.ap-guangzhou.myqcloud.com/home/%E6%9A%82%E6%97%A0%E8%AE%A2%E5%8D%95.png" startPadding="true" bgColor="#fff" tipsText="您还没有订单,去选取一件物品再来吧~"></DataEmpty>
					</view>
					<view class="Jy_order_swiper_container" v-else>
						<view class="Jy_order_swiper_list" v-for="(item, index) in 4" :key="index">
							<view class="Jy_order_swiper_list_container">
								<view class="store_info_group">
									<view class="left_store_info_box">
										<view class="store_icon_box">
											<image src="../../../../static/home/logo.png" mode="aspectFill"></image>
										</view>
										<view class="store_name">
											<text>商家名称</text>
										</view>
										<view class="right_icon_box">
											<u-icon name="arrow-right" color="#000000" size="12"></u-icon>
										</view>
									</view>
									<view class="order_state_box">
										<text>{{orderStateIndex == 0 ? '交易关闭/交易已完成' : orderStateIndex == 1 ? '买家待付款' : orderStateIndex == 2 ? '等待商家发货' : orderStateIndex == 3 ? '商家已收货' : '交易完成,待评价'}}</text>
									</view>
								</view>
								<view class="shop_info_group" @click="getOrderDetail()">
									<view class="shop_image_box">
										<image src="../../../../static/home/logo.png" mode="aspectFill"></image>
									</view>
									<view class="shop_info_group">
										<view class="shop_name_box">
											<text>商品名称商品名称商品名称商品名称商品名称商品名称商品名称称商品名称称商品名称</text>
										</view>
										<view class="shop_parameter_box">
											<text>商品规格</text>
										</view>
									</view>
									<view class="shop_price_group">
										<view class="shop_price_box">
											<text>￥</text>
											<text>11.5</text>
										</view>
										<view class="shop_number_box">
											<text>x</text>
											<text class="number">1</text>
										</view>
									</view>
								</view>
								
								<!-- 订单实际付款 -->
								<view class="yin_paypaly_group">
									<view class="yin_paypaly_box">
										<text class="big_font">应付款</text>
										<text class="small_font mg_left">￥</text>
										<text class="big_font">11.5</text>
									</view>
								</view>
								
								<!-- 订单操作按钮区域 -->
								<!-- 
								
									全部(0): 删除订单 + 待评价订单
									待付款(1): 修改地址 取消订单 去支付
									待发货(2): 申请退款 再次购买
									待收货(3): 申请退款 再次购买 确认收货
									待评价(4): 删除订单 + 立即评价
									退款/售后: 退款详情
								 
								 -->
								<view class="order_option_group">
									<view class="left_more_box">
										<text>更多</text>
									</view>
									<view class="right_option_button_group">
										<view class="button_box" v-if="orderStateIndex == 0 || orderStateIndex == 4">
											<text>删除订单</text>
										</view>
										<view class="button_box" v-if="orderStateIndex == 1" @click="getOrderAddress('1')">
											<text>修改地址</text>
										</view>
										<view class="button_box" v-if="orderStateIndex == 2 || orderStateIndex == 3">
											<text>申请退款</text>
										</view>
										<view class="button_box" v-if="orderStateIndex == 1">
											<text>取消订单</text>
										</view>
										<view class="button_box huigo_button" v-if="orderStateIndex == 2 || orderStateIndex == 3">
											<text>再次购买</text>
										</view>
										<view class="button_box pay_button" v-if="orderStateIndex == 1">
											<text>去支付</text>
										</view>
										<view class="button_box require_wu_button" v-if="orderStateIndex == 3">
											<text>确认收货</text>
										</view>
										<view class="button_box bargin_button" v-if="orderStateIndex == 0 || orderStateIndex == 4" @click="getCommodityEvaluation()">
											<text>立即评价</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
 
<script>
// 数据为空
import DataEmpty from '../../../../components/DataEmpty.vue';
	
export default {
	components: {
		DataEmpty	
	},
	data() {
		return {
			orderStateIndex: 0,
			orderStateList: [
				{
					name: '全部'
				},
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '待评价'
				}
			]
		};
	},
	onLoad(data) {
		this.orderStateIndex = data.index
	},
	methods: {
		// 导航栏切换
		tabChange(index) {
			this.orderStateIndex = index
		},
		// 跳转到订单详情页面
		getOrderDetail() {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/orderDetail/orderDetail?state=' + this.orderStateIndex
			})
		},
		// 跳转到收货地址页面
		getOrderAddress(index) {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/shippingAddress/shippingAddress?key=' + index
			})
		},
		// 跳转到评价页面
		getCommodityEvaluation() {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/commodityEvaluation/commodityEvaluation'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'orderCenter.scss';
</style>
